<script>
// 单个应用预览
import GridLayouts from '../workspace/GridLayouts.vue';
import * as utils from '../../utils/helps';
import * as types from '../../store/types';

export default {
  name: 'PreviewAppContent',
  components: { GridLayouts },
  data() {
    return {
      layout: [],
      spinShow: false,
    };
  },
  computed: {
    appData() {
      return this.$store.state.app.appData;
    },
  },
  mounted() {
    this.spinShow = true;
    if (Object.keys(this.$store.getters.controls).length === 0) {
      new Promise((resolve, reject) => {
        const dataInfo = this.$store.dispatch(types.GET_APP_DATA, this.appData.id);
        resolve(dataInfo);
      }).then(res => {
        let layout = utils.setAllControlToArr(JSON.parse(res.info));
        this.layout = utils.setPositionToOut(layout);
        this.controlTools(false);
        this.spinShow = false;
      });
    } else {
      let layout = utils.setAllControlToArr(this.$store.getters.controls);
      this.layout = utils.setPositionToOut(layout);
      this.controlTools(false);
      this.spinShow = false;
    }
  },
  methods: {
    controlTools(status) {
      this.$nextTick(() => {
        this.$events.emit('on-hiddenTools', status);
      });
    },
  },
};
</script>

<template>
  <div>
    <Spin
      v-if="spinShow"
      fix>
      <loading type="ball-grid-pulse" />
    </Spin>
    <GridLayouts
      :layout-list="layout"
      :is-draggable="false"
      :is-resizable="false"
      :is-show-tools="false"
    />
  </div>

</template>

<style lang="less" scoped>
</style>
